<template>
  <div class="box">

    <el-button class="new_btn"
               type="primary"
               @click="handleNew">新增</el-button>
    <el-table :data="studentInfo"
              border
              style="width: 100%">
      <el-table-column prop="name"
                       label="姓名" />
      <el-table-column prop="sex"
                       label="性别" />
      <el-table-column prop="age"
                       label="年龄" />
      <el-table-column prop="tel"
                       label="联系电话" />
      <el-table-column fixed="right"
                       label="操作">
        <template #default="{ row }">
          <el-button type="text"
                     size="small"
                     @click="handleDetail(row)">查看</el-button>
          <el-button type="text"
                     size="small"
                     @click="handleEdit(row)">编辑</el-button>
          <el-button type="text"
                     size="small"
                     @click="handleDel(row)">删除</el-button>
        </template>
      </el-table-column>
      <el-pagination layout="prev, pager, next" :page-count="pageMax" :current-page="page"
        @current-change="clickPage" />
    </el-table>
    <el-pagination layout="total,sizes,prev,pager,next,jumper" :total="studentInfo.length"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" />
    <!-- 新建/编辑弹框 -->
    <useradd v-if="dialogShow"
             v-model:dialogShow="dialogShow"
             :rowInfo="rowInfo"
             :title="title"
             :arrayNum="studentInfo.length"
             @addRow="addRow"
             @editRow="editRow" />
    <!-- 详情弹窗 -->
    <userdetail v-if="detailShow"
                :rowInfo="rowInfo"
                @closeDetail="closeDetail" />

  </div>
</template>

<script>

import { reactive, ref, toRefs } from 'vue'
import { ElMessageBox } from 'element-plus'
import useradd from './useradd.vue'
import userdetail from './userdetail.vue'


export default {
  components: { useradd, userdetail },
  setup() {
    const data = reactive({
      dialogShow: false, // 新增/编辑弹框
      detailShow: false, // 详情弹窗
      rowInfo: {}, // 新增/编辑的数据
      title: "", // 是新建还是修改
      currentPage: 1, //默认页码为1
      pagesize: 10, //默认一页显示10条

      studentInfo: [
        {
          id: 1,
          name: '刘顺备',
          sex: '男',
          age: 20,
          tel: 1354477862,
        },
        {
          id: 2,
          name: '关顺羽',
          sex: '女',
          age: 18,
          tel: 1354978862,
        },
        {
          id: 3,
          name: '张顺飞',
          sex: '男',
          age: 24,
          tel: 144972862,
        },
        {
          id: 4,
          name: '马顺超',
          sex: '男',
          age: 22,
          tel: 1446267762,
        },
        {
          id: 5,
          name: '赵顺云',
          sex: '女',
          age: 18,
          tel: 1354462862,
        },
      ],
    })
    const method = reactive({
      handleNew() {
        data.title = '新增'
        data.rowInfo = {}
        data.dialogShow = true
      },
      handleDetail(val) {
        data.detailShow = true
        data.rowInfo = val
      },
      handleEdit(val) {
        data.title = '修改'
        data.dialogShow = true
        data.rowInfo = val
      },
      handleDel(val) {
        ElMessageBox.confirm('你确定删除这个学生的信息吗?', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            method.handleSure(val)
          })
          .catch(() => {
            // catch error
          })
      },
      handleSizeChange: function (size) {

        //一页显示多少条

        this.pagesize = size;

      },

      handleCurrentChange: function (currentPage) {

        //页码更改方法

        this.currentPage = currentPage;

      },
      handleSure(val) {
        this.dialogVisible = false
        const index = data.studentInfo.findIndex((item) => item.id === val.id)
        data.studentInfo.splice(index, 1)
      },
      // 添加行
      addRow(val) {
        data.studentInfo.push(val)
      },
      // 编辑行
      editRow(val) {
        let index = data.studentInfo.findIndex(
          (item, index) => item.id === val.id
        )
        data.studentInfo.splice(index, 1, val)
      },
      // 关闭详情弹窗
      closeDetail() {
        data.detailShow = false
      },
    })
    return { ...toRefs(data), ...method }
  },
}
</script>

<style lang="less" scoped>
.box {
  padding: 20px;

  .new_btn {
    margin-bottom: 10px;
  }

  ::v-deep .el-table__cell {
    text-align: center;
  }
}

.box {
  width: 90%;
  height: 80%;
  transform: translateX(5%) translateY(10%);
  box-shadow: 1px 2rem 5rem rgba(14, 222, 222, 0.539);
  border-radius: 1rem;
  border: 0.1rem rgb(255, 255, 255) solid;
  background-color: rgba(6, 68, 68, 0.539);
  backdrop-filter: blur(3px);
}
</style>
